import React, { memo, useEffect } from 'react'

import ThemeHeaderRCM from '@/components/theme-header-rcm';

import {RankingWrapper} from './style';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { getTopListAction } from '../../store/actionCreators';
import TopRanking from '@/components/top-ranking';

export default memo(function RecommendRanking() {

    const {upRankings,newRankings,originRankings} = useSelector((state) => ({
    upRankings: state.getIn(["recommend", "upRankings"]),
    newRankings: state.getIn(["recommend", "newRankings"]),
    originRankings: state.getIn(["recommend", "originRankings"])
  }), shallowEqual);

    const dispatch = useDispatch();

    useEffect(()=>{
        dispatch(getTopListAction(0));
        dispatch(getTopListAction(2));
        dispatch(getTopListAction(3));
    },[dispatch]);

    return (
        <RankingWrapper>
            <ThemeHeaderRCM title="榜单"/>
            <div className="tops">
                <TopRanking info={upRankings}/>
                <TopRanking info={newRankings}/>
                <TopRanking info={originRankings}/>
            </div>
        </RankingWrapper>
    )
})
